<script>
import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
import {useArticleApi} from "@/api/homePage";

export default {
  name: "index",
  mixins: [ZPMixin],
  data() {
    return {
      announceList: [], // 公告列表数据
      loading: false,
      id: 0,
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.$t('announcement.title')
    });
    if (options.id) {
      this.id = parseInt(options.id)
    }

  },
  methods: {
    // 分页查询公告数据
    async queryList(pageNo, pageSize) {
      try {
        this.loading = true;
        
        const params = {
          Index: pageNo,
          Size: pageSize,
          ArticleCategoryId: this.id
        };
        
        const { Data } = await useArticleApi(params);
        
        this.loading = false;
        this.$refs.paging.complete(Data);
      } catch (error) {
        console.error('获取公告列表失败:', error);
        this.loading = false;
        this.$refs.paging.complete(false);
        uni.showToast({
          title: this.$t('announcement.loadDataFailed'),
          icon: 'none'
        });
      }
    },
    
    // 跳转到公告详情页
    goToDetail(item) {
      console.log(item)
      uni.navigateTo({
        url: `/pages/article/index?id=${item.Id}&readOnly=true`
      });
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      
      // 尝试创建日期对象
      const date = new Date(dateString);
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        return dateString; // 如果日期无效，返回原始字符串
      }
      
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

<template>
  <view class="announce-container">
    <z-paging 
      ref="paging"
      v-model="announceList"
      @query="queryList"
      :default-page-size="10"
      :show-scrollbar="false"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      :loading-more-no-more-text="$t('announcement.noMoreAnnouncements')"
      :paging-style="{minHeight: '100vh', backgroundColor: '#F5F6F7'}"
      height="100vh">
      
      <!-- 公告列表 -->
      <view class="announce-list">
        <view 
          class="announce-item" 
          v-for="(item, index) in announceList" 
          :key="index"
          @click="goToDetail(item)">
          
          <!-- 公告图片 -->
          <view class="announce-image-container" v-if="item.CoverImg">
            <image class="announce-image" :src="item.CoverImg" mode="aspectFill"></image>
          </view>
          
          <view class="announce-content-container">
            <!-- 公告标题 -->
            <view class="announce-title">{{item.Title || $t('announcement.announcementTitle')}}</view>
            
            <!-- 公告摘要 -->
            <view class="announce-content" v-if="item.Abstract">{{item.Abstract}}</view>

            <!-- 公告底部信息 -->
            <view class="announce-footer">
              <view class="announce-date">{{formatDate(item.AddTime || item.CreationTime)}}</view>
              <view class="announce-more">{{$t('announcement.viewDetails')}} ></view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style scoped lang="scss">
.announce-container {
  min-height: 100vh;
  background-color: #F5F6F7;
}

.announce-list {
  padding: 30rpx;
}

.announce-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  
  .announce-image-container {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
    border-radius: 8rpx;
    overflow: hidden;
    
    .announce-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .announce-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .announce-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16rpx;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .announce-content {
    font-size: 26rpx;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 16rpx;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .announce-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .announce-date {
      font-size: 24rpx;
      color: #999999;
    }
    
    .announce-more {
      font-size: 24rpx;
      color: #498FFF;
    }
  }
}

.empty-container {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>